<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="../utils/js/old_version/react.development.js"></script>
    <script src="../utils/js/old_version/react-dom.development.js"></script>
    <script src="../utils/js/old_version/babel.min.js"></script>
    <script src="../utils/js/old_version/prop-types.js"></script>

    <script type="text/babel">
      class Add extends React.Component {
        // 1. 创建实例第一步调用
        constructor(props) {
          console.log("Add---constructor");
          super(props);
          this.state = { count: 0 };
        }
        sum = () => {
          const { count } = this.state;
          this.setState({ count: count + 1 });
        };

        force = () => {
          this.forceUpdate(); // 强制触发更新
        };

        remove = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("app"));
        };

        // 2. 将要被挂载
        componentWillMount() {
          console.log("Add---componentWillMount");
        }

        // 3. 挂载一下
        render() {
          console.log("Add---render");
          const { count } = this.state;
          return (
            <div>
              <div>和是{count}</div>
              <button onClick={this.sum}>+1</button>
              <button onClick={this.remove}>卸载组件</button>
              <button onClick={this.force}>强制触发更新的钩子</button>
            </div>
          );
        }

        // 4. 挂载完毕
        componentDidMount() {
          console.log("Add---componentDidMount");
        }

        // 5. 组件将要卸载的钩子
        componentWillUnmount() {
          console.log("Add---componentWillUnmount");
        }

        // 控制组件更新的阀门： 当组件的状态发送变化的时候(也就是通过setState正常的更新了状态里面的数据的时候),页面组件是否要更新,每次组件的状态发生改变的时候，会去调用这个钩子，如果不写这个生命周期钩子，react 默认这个函数返回的是 true， 如果自己写的话 需要返回一个布尔值来标识
        shouldComponentUpdate() {
          console.log("Add---shouldComponentUpdate");
          return false;
        }

        /*
          1. 通过正常修改状态里面的数据的时候: shouldComponentUpdate 返回 true 才往下走 componentWillUpdate 跟 render 跟 componentDidUpdate
          2. 不修改组件状态里面的数据的时候： 通过强制更新的方法，即使 shouldComponentUpdate 返回 false ，也可以往下走componentWillUpdate 跟  render 跟 componentDidUpdate
        */
        // 组件将要更新 的钩子
        componentWillUpdate() {
          console.log("Add---componentWillUpdate");
        }
        // 组件更新完毕 的钩子
        componentDidUpdate() {
          console.log("Add---componentDidUpdate");
        }
      }

      // ReactDOM.render(<Add />, document.getElementById("app"));

      // 父子组件
      class A extends React.Component {
        state = { carName: "大奔哥" };
        changeName = () => {
          this.setState({ carName: "改变后的carName" });
        };
        remove = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("app"));
        };
        componentWillMount() {
          console.log("A----componentWillMount 父组件将被挂载");
        }
        render() {
          console.log("A----render 父组件挂载一下");
          const { carName } = this.state;
          return (
            <div>
              <div>父组件A</div>
              <button onClick={this.changeName}>修改子组件汽车的名称</button>
              <B carName={carName} />
              <button onClick={this.remove}>组件销毁吧</button>
            </div>
          );
        }
        componentDidMount() {
          console.log("A----componentDidMount 父组件挂载完毕");
        }

        // 更新
        shouldComponentUpdate() {
          console.log(
            "A----shouldComponentUpdate 父组件状态发生改变 页面是否需要更新的阀门"
          );
          return true;
        }
        componentWillUpdate() {
          console.log("A----componentWillUpdate 父组件状态改变，即将更新");
        }
        componentDidUpdate() {
          console.log("A----componentDidUpdate 父组件状态改变，更新完毕");
        }

        componentWillUnmount() {
          console.log("A--- componentWillUnmount ,父组件即将被销毁");
        }
      }

      class B extends React.Component {
        componentWillReceiveProps() {
          console.log(
            "B----componentWillReceiveProps 子组件接收父组件的参数，首次不触发，等值更新之后才触发"
          );
        }
        componentWillMount() {
          console.log("B----componentWillMount 子组件将挂载");
        }
        render() {
          console.log("B----render 子组件挂载一下吧");
          const { carName } = this.props;
          return <div>我是子组件B,从父组件A传过来的值carName是：{carName}</div>;
        }
        componentDidMount() {
          console.log("B----componentDidMount 子组件挂载完毕");
        }
        // 更新
        shouldComponentUpdate() {
          console.log(
            "B----shouldComponentUpdate 状态发生改变 子组件更新的阀门"
          );
          return true;
        }
        componentWillUpdate() {
          console.log(
            "B----componentWillUpdate 父组件状态改变，子组件即将更新"
          );
        }
        componentDidUpdate() {
          console.log("B----componentDidUpdate 父组件状态改变，子组件更新完毕");
        }
        componentWillUnmount() {
          console.log("B--- componentWillUnmount ,子组件即将被销毁");
        }
      }

      ReactDOM.render(<A />, document.getElementById("app"));
    </script>
  </body>
</html>
